import React, { useState, useEffect } from "react";
import { invoke } from "@tauri-apps/api/core";
import {
  Box,
  FormControl,
  InputLabel,
  Select,
  MenuItem,
  TextField,
  Typography,
  Paper,
} from "@mui/material";

export default function Settings({ settings, onSettingsChange }) {
  const handleChange = async (event) => {
    const { name, value } = event.target;
    const newSettings = {
      ...settings,
      [name]: value,
    };
    onSettingsChange(newSettings);
  };

  return (
    <Box sx={{ height: "calc(100vh - 64px)", overflow: "auto" }}>
      <Box sx={{ p: 3, maxWidth: 800, margin: "0 auto" }}>
        <Paper sx={{ p: 3 }}>
          <Typography variant="h6" gutterBottom>
            基本设置
          </Typography>

          <FormControl fullWidth margin="normal">
            <InputLabel>主题</InputLabel>
            <Select
              name="theme"
              value={settings.theme}
              label="主题"
              onChange={handleChange}
            >
              <MenuItem value="浅色">浅色</MenuItem>
              <MenuItem value="深色">深色</MenuItem>
            </Select>
          </FormControl>

          <TextField
            fullWidth
            margin="normal"
            label="页面标题"
            name="page_title"
            value={settings.page_title}
            onChange={handleChange}
            helperText="[下载] 下载 0.00 B/s, 上传 0.00 B/s - 红岸下载工具"
          />

          <FormControl fullWidth margin="normal">
            <InputLabel>页面标题更新时间间隔</InputLabel>
            <Select
              name="page_title_update_interval"
              value={settings.page_title_update_interval}
              label="页面标题更新时间间隔"
              onChange={handleChange}
            >
              <MenuItem value={1}>1 秒</MenuItem>
              <MenuItem value={2}>2 秒</MenuItem>
              <MenuItem value={5}>5 秒</MenuItem>
              <MenuItem value={10}>10 秒</MenuItem>
            </Select>
          </FormControl>

          <FormControl fullWidth margin="normal">
            <InputLabel>全局状态更新时间间隔</InputLabel>
            <Select
              name="status_update_interval"
              value={settings.status_update_interval}
              label="全局状态更新时间间隔"
              onChange={handleChange}
            >
              <MenuItem value={1}>1 秒</MenuItem>
              <MenuItem value={2}>2 秒</MenuItem>
              <MenuItem value={5}>5 秒</MenuItem>
              <MenuItem value={10}>10 秒</MenuItem>
            </Select>
          </FormControl>

          <FormControl fullWidth margin="normal">
            <InputLabel>任务信息更新时间间隔</InputLabel>
            <Select
              name="task_info_update_interval"
              value={settings.task_info_update_interval}
              label="任务信息更新时间间隔"
              onChange={handleChange}
            >
              <MenuItem value={1}>1 秒</MenuItem>
              <MenuItem value={2}>2 秒</MenuItem>
              <MenuItem value={5}>5 秒</MenuItem>
              <MenuItem value={10}>10 秒</MenuItem>
            </Select>
          </FormControl>

          {[
            { name: "task_delete_confirm", label: "任务删除前确认" },
          ].map((setting) => (
            <FormControl key={setting.name} fullWidth margin="normal">
              <InputLabel>{setting.label}</InputLabel>
              <Select
                name={setting.name}
                value={settings[setting.name]}
                label={setting.label}
                onChange={handleChange}
              >
                <MenuItem value="启用">启用</MenuItem>
                <MenuItem value="禁用">禁用</MenuItem>
              </Select>
            </FormControl>
          ))}
        </Paper>
      </Box>
    </Box>
  );
}
